//	仪表盘自定义配色

import React, { useState } from 'react';
import InputColorPicker from './InputColorPicker';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

interface customColorType {
	item: string;
	color: string;
}

const GaugeCustomColor = ( props: IProps ) => {
	let { config, form, onValuesChange } = props;
	const [ gaugeColorBlock1, setGaugeColorBlock1 ] = useState( ( config.style && config.style.gaugeColorBlock1 ) || '#F4664A' );
	const [ gaugeColorBlock2, setGaugeColorBlock2 ] = useState( ( config.style && config.style.gaugeColorBlock2 ) || '#FAAD14' );
	const [ gaugeColorBlock3, setGaugeColorBlock3 ] = useState( ( config.style && config.style.gaugeColorBlock3 ) || '#30BF78' );

	const handleBlockColor1 = ( color ) => {
		setGaugeColorBlock1( color );
		form.setFieldsValue( { gaugeColorBlock1: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleBlockColor2 = ( color ) => {
		setGaugeColorBlock2( color );
		form.setFieldsValue( { gaugeColorBlock2: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleBlockColor3 = ( color ) => {
		setGaugeColorBlock3( color );
		form.setFieldsValue( { gaugeColorBlock3: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>
			<FormItem label="0-60" name="gaugeColorBlock1" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={ gaugeColorBlock1 }
					change={ ( color ) => handleBlockColor1( color ) }
				></InputColorPicker>
			</FormItem>

			<FormItem label="60-80" name="gaugeColorBlock2" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={ gaugeColorBlock2 }
					change={ ( color ) => handleBlockColor2( color ) }
				></InputColorPicker>
			</FormItem>

			<FormItem label="80-100" name="gaugeColorBlock3" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={ gaugeColorBlock3 }
					change={ ( color ) => handleBlockColor3( color ) }
				></InputColorPicker>
			</FormItem>

		</div>
	);
};

export default React.memo( GaugeCustomColor );
